<template>
  <div>
    <div class="" v-if="type === 'mp4'">
      <!-- 帧段选项卡 -->
      <div class="tabs-container">
        <div
          v-for="item in tabList"
          :key="item.id"
          :value="item.key"
          :class="activeKey === item.key ? 'tab-item active' : 'tab-item'"
          @click="(e) => handleClick(e, item.key)"
        >
          {{ item.title }}
        </div>
      </div>
      <!-- 视频病灶列表组件渲染 -->
      <div style="overflow-y: auto">
        <LesionItemComp
          v-bind="{
            ...$attrs,
            ...props,
            activeKey,
          }"
        />
      </div>
    </div>
    <div v-else>
      <LesionItemComp
        v-bind="{
          ...$attrs,
          ...props,
        }"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import LesionItemComp from "./LesionItem.vue";
import * as Store from "@/store";
import type { LesionItem } from "@/store/modules/filmRead/type";
import type * as FileReadApiType from "@/api/filmRead/filmRead.d";
interface Props {
  list:
    | {
        [x: string]: LesionItem | LesionItem[];
        [x: number]: LesionItem | LesionItem[];
      }
    | undefined
    | FileReadApiType.GroupViewItem[];
  isEye: boolean;
  isColor: boolean;
  isDel: boolean;
  LeftHooks: Left.LeftHooks;
  type: string;
}
const props = defineProps<Props>();
const emits = defineEmits(["update:activeKey"]);
// const FilmRead = Store.useFilmRead();
// 针对视频模式帧段列表/单帧列表的tab处理
const activeKey = ref(1);//默认帧段列表
const tabList = ref([
  {
    id: 1,
    key: 1,
    title: "帧段标注",
  },
  {
    id: 2,
    key: 2,
    title: "单帧标注",
  },
]);
onMounted(() => {
  props.LeftHooks.leftHooksData.videoDisabled =
    activeKey.value === 1 && props.type === "mp4";
});
const handleClick = (e: MouseEvent, key: number) => {
  activeKey.value = key;
  props.LeftHooks.leftHooksData.videoDisabled = key === 1;
  props.LeftHooks.handleAllEyeClick(e, key);
  props.LeftHooks.setTabValue(key);
  props.LeftHooks.resetHookData();
  emits("update:activeKey", activeKey.value);
};
watch(
  () => props.LeftHooks.getTabValue().value,
  (val) => {
    activeKey.value = val ? 1 : 2;
  }
);
</script>

<style lang="less" scoped>
.tabs-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  background-color: transparent;
  margin-top: 5px;
  padding: 0 5px;
  margin-bottom: 5px;
  position: sticky;
  top: 0;
  left: 0;
  .tab-item {
    height: 24px;
    width: 50%;
    background-color: #0e1c24;
    font-size: 14px;
    font-weight: 400;
    // color: #fff;
    color: #cedee0;
    text-align: center;
    padding: 5px 0;
    cursor: pointer;
    user-select: none;
  }
  .active.tab-item {
    // background-color: #183547;
    // color: #67c9d5;
    background-color: #28353c;
    color: #13fffb;
  }
}
</style>
